<template>
	<view>
		
		<view class="login-header">{{isPhone ? '手机号快速登录' : '账户密码登录'}}</view>
		
		<view class="login-wrapper">
			<block v-if="isPhone">
				<view class="login-wrapper__item">
					<input class="login-wrapper__item__input" maxlength="11" placeholder-class="placeholder" type="text" v-model="phone" placeholder="请输入手机号码" />
					<text class="contorl-icon iconfont" v-if="phone" @click="clearAccount">&#xe6d0;</text>
				</view>
				<view class="login-wrapper__item">
					<input class="login-wrapper__item__input" maxlength="6" placeholder-class="placeholder" type="text" v-model="code" placeholder="请输入验证码" />
					<view class="login-wrapper__item__txt" v-if="isSend">{{countDown}}秒后重新发送</view>
					<view class="login-wrapper__item__send" v-else @click="sendCode">获取动态密码</view>
				</view>
			</block>
			<block v-else>
				<view class="login-wrapper__item">
					<input class="login-wrapper__item__input" maxlength="32" placeholder-class="placeholder" type="text" v-model="account" placeholder="邮箱/手机号码" />
					<text class="contorl-icon iconfont" v-if="account" @click="clearAccount">&#xe6d0;</text>
				</view>
				<view class="login-wrapper__item">
					<input class="login-wrapper__item__input" maxlength="6" placeholder-class="placeholder" type="text" v-model="imgCode" placeholder="图形验证码" />
					<view class="login-wrapper__item__send">
						<image :src="imgCodeInfo.pic" style="width: 140rpx; height: 60rpx;" @click="getImgCode" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="login-wrapper__item">
					<input class="login-wrapper__item__input" maxlength="16" placeholder-class="placeholder" type="text" :password="isPassWord" v-model="password" placeholder="密码" />
					<text class="contorl-icon iconfont" :class="isPassWord ? '' : 'active'" @click="toggleType">&#xe62b;</text>
				</view>
			</block>
			<view class="login-wrapper__button" v-if="loginCheck" @click="loginSubmit">登录</view>
			<view class="login-wrapper__button disabled" v-else>登录</view>
			<view class="login-wrapper__tiny">
				<view class="login-wrapper__tiny__left">
					<block v-if="!isPhone">
						<text @click="register">注册</text>
						<text style=" color: #999; padding: 0 12rpx;">|</text>
						<text @click="forget" style=" color: #999;">忘记密码？</text>
					</block>
				</view>
				<view class="login-wrapper__tiny__right" @click="loginSwitch">{{isPhone ? '账户密码登录' : '手机号快速登录'}}</view>
			</view>
		</view>
		
		<!-- <view class="login-footer">
			<view class="login-footer__title"><text class="ft">其他方式登录</text></view>
			<view class="login-footer__content">
				<view class="iconfont qq">&#xe6d1;</view>
				<view class="iconfont wb">&#xe6d4;</view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import {check_phone, check_email} from '@/utils/utils.js'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				isPhone: false,
				account: '',
				password: '',
				imgCodeInfo: {},
				imgCode: '',
				isPassWord: true,
				isSend: false,
				countDown: 119
			}
		},
		onLoad() {
			this.getImgCode() // 图片验证码
		},
		computed: {
			loginCheck(){
				return (this.phone && this.code) || (this.account && this.imgCode && this.password)
			}
		},
		methods: {
			
			// 切换登录方式
			loginSwitch(){
				this.isPhone = !this.isPhone;
				if(this.isPhone){
					this.account = '';
					this.password = ''
				}else{
					this.phone = '';
					this.code = '';
					this.getImgCode()
				}
			},
			
			// 清除账号
			clearAccount(){
				if(this.isPhone){
					this.phone = ''
				}else{
					this.account = ''
				}
			},
			
			// 密码显示隐藏
			toggleType(){
				this.isPassWord = !this.isPassWord
			},
			
			// 获取图片验证码
			async getImgCode(){
				let getImgRes;
				let params = {
					method: "api/v2/common/get_code_image"
				}
				getImgRes = await this.$http(params);
				this.imgCodeInfo = getImgRes.data
			},
			
			// 动态验证码获取
			async getDynamicCode(){
				let codeRes,
					params = {
						method: "api/v2/dynamic/code",
						receiver: this.phone,
						msgtype: 'login_msgcode'
					}
				codeRes = await this.$http(params);
				if(codeRes.status){
					uni.showToast({
						title: '发送验证码成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: codeRes.msg,
						icon: 'none'
					})
				}
			},
			
			// 发送验证码
			sendCode(){
				let timer,
					phone = this.phone;
				if(phone){
					if(check_phone(phone)){
						this.isSend = true;
						timer = setInterval(() => {
							if(this.countDown > 1){
								this.countDown--
							}else{
								this.countDown = 119;
								this.isSend = false;
								clearInterval(timer)
							}
						}, 1000)
						
						this.getDynamicCode()
					}else{
						uni.showToast({
							title: '手机号码格式有误!',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '手机号码不能为空!',
						icon: 'none'
					})
				}
			},
			
			// 手机登陆请求
			async loginRequest(){
				let loginRes,
					params = {
						method: "api/v2/member/login/login_by_phone",
						mobile: this.phone,
						comefrom: "h5",
						msg_code: this.code
					}
				loginRes = await this.$http(params);
				this.$_loginHandle(loginRes)
			},
			
			// 账号登录请求
			async accountLogin(){
				let loginRes,
					params = {
						method: "api/v2/member/login/login_by_user",
						user: this.account,
						pwd: this.password,
						captcha_key: this.imgCodeInfo.key,
						code: this.imgCode,
						develop:true
					}
				loginRes = await this.$http(params);
				this.$_loginHandle(loginRes)
			},
			
			// 登录请求成功操作
			$_loginHandle(res){
				if(res.status){
					let pages = getCurrentPages();
					let prev = pages[pages.length - 2];
					prev.$vm.isUpdate = true;
					uni.setStorageSync('token',res.data.token);
					uni.setStorageSync('userInfo',res.data.memberInfo);
					this.$store.commit('login', res.data.memberInfo);
					
					//检测商家身份
					let hasLogin = this.$store.state.hasLogin;
					if(hasLogin){
						this.salesRole();
					}
					
					if(prev){
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}else{
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/home"
							})
						}, 1000)
					}
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				
			},
			
			// 发送登陆请求
			loginSubmit(){
				let phone = this.phone;
				let account = this.account;
				let password = this.password;
				let isFormat = check_phone(account) || check_email(account);
				if(this.isPhone){
					if(phone){
						if(check_phone(phone)){
							// 验证成功发送请求
							this.loginRequest()
						}else{
							uni.showToast({
								title: '手机号码格式有误!',
								icon: 'none'
							})
						}
					}else{
						uni.showToast({
							title: '手机号码不能为空!',
							icon: 'none'
						})
					}
				}else{
					
					//账号格式验证
					if(!isFormat){
						uni.showToast({
							title: '账号格式不正确',
							icon: 'none'
						})
						return;
					}
					
					
					// 密码长度验证
					if(password.length < 6){
						uni.showToast({
							title: '密码长度不能小于6位',
							icon: 'none'
						})
						return;
					}
					
					this.accountLogin()
					
				}
			},
			
			// 注册
			register(){
				uni.navigateTo({
					url: './register'
				})
			},
			
			// 忘记密码
			forget(){
				uni.navigateTo({
					url: './find'
				})
			},
			
			//检测商家身份
			async salesRole(){
				let params = {
					method: "api/v2/dev/salesman/index",
				}
				let res = await this.$http(params);
				if(res.status){
					uni.setStorageSync('appRole',res.data.role);
				}else{
					uni.setStorageSync('appRole','business');
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.login-header{
		padding: 60rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.login-wrapper{
		padding: 0 60rpx;
		&__item{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			position: relative;
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 2rpx;
				position: absolute;
				bottom: 0;
				transform: scaleY(.5);
				background-color: $uni-border-color;
			}
			&__input{
				flex: 1 1 auto;
				padding: 30rpx 0 20rpx;
				font-size: $uni-font-size-lg;
				font-family: Arial, Helvetica, sans-serif;
			}
			&__send{
				flex: 0 0 auto;
				color: $uni-color-primary;
				margin-left: 40rpx;
				font-size: $uni-font-size-sm;
			}
			&__txt{
				flex: 0 0 auto;
				color: $uni-text-color-disable;
				margin-left: 40rpx;
				font-size: $uni-font-size-sm;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
		&__button{
			color: $uni-text-color-inverse;
			margin-top: 56rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
			background-color: $uni-bg-color-primary;
			&.disabled{
				background-color: #bdefd6;
			}
		}
		&__tiny{
			display: flex;
			padding: 40rpx 0;
			justify-content: space-between;
			align-items: center;
			font-size: $uni-font-size-sm;
			&__left{
				color: $uni-color-primary;
			}
			&__right{
				color: $uni-text-color-grey;
			}
		}
	}
	.login-footer{
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		&__title{
			color: $uni-text-color-grey;
			position: relative;
			text-align: center;
			font-size: $uni-font-size-base;
			.ft{
				position: relative;
				z-index: 10;
				padding: 0 16rpx;
				background-color: $uni-bg-color;
			}
			&:after{
				content: "";
				height: 2rpx;
				position: absolute;
				left: 60rpx;
				right: 60rpx;
				top: 50%;
				transform: scaleY(.5);
				background-color: $uni-border-color;
			}
		}
		&__content{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50rpx 0;
			.iconfont{
				margin: 0 60rpx;
				font-size: 60rpx;
				&.qq{
					color: #48b9f1;
				}
				&.wb{
					color: #f76968;
				}
			}
		}
	}
	.contorl-icon{
		color: #c2c6cf;
		display: inline-block;
		margin-left: 20rpx;
		font-size: 38rpx;
		&.active{
			color: #ff6700;
		}
	}
	.placeholder{
		color: $uni-text-color-placeholder;
	}
</style>
